/*
 * @Title: myPOI点
 * @Created by: gsjPC 
 */
<template>
	<view>
		<comHeader :config="navConfig"></comHeader>
		
		<web-view 
			@message="wvMsgHandle"
			:webview-styles="webviewStyles" 
			src="/hybrid/html/index.html">
			
			</web-view>
		<!-- <image src="/static/tMapText.png" class="tMapText"></image> -->
		<!-- 高德map -->
		<!-- <map style="width: 100%; height: 560upx;" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
		<!-- 位置信息 -->
		<view class="poiInfo">
			<view class="infoTit"><text>景点地址</text></view>
			<!-- <view class="infoCon">
				<view><text>北纬</text>{{latitude}}</view>
				<view><text>东经</text>{{longitude}}</view>
			</view> -->
			<view class="infoInput">
				<text>景区名称</text>
				<input 
				type="text"
				placeholder="请输入该景区名称"
				placeholder-style="color:#BBBBBB"/>
			</view>
			<view class="infoInput">
				<text>标题</text>
				<input 
				type="text" 
				placeholder="请为此内容编写标题"
				placeholder-style="color:#BBBBBB"/>
			</view>
		</view>
		<!-- 图片信息 -->
		<view class="poiInfo2">
			<view class="infoTit"><text>图片信息</text></view>
			<view class="picCon">
				<view class="picConList">
					<image src="/static/poiIco2.png" @tap="uploadZm"></image>
					<text>上传位置正面图片</text>
				</view>
				<view class="picConList">
					<image src="/static/poiIco1.png" @tap="uploadZw1"></image>
					<text>上传位置周围图片</text>
				</view>
				<view class="picConList">
					<image src="/static/poiIco1.png" @tap="uploadZw2"></image>
					<text>上传位置周围图片</text>
				</view>
			</view>
		</view>
		<!-- 备注 -->
		<view class="poiInfo2 tipInfo">
			<view class="bzText">备注</view>
			<view>
				<textarea 
					placeholder="请输入备注内容"
					placeholder-style="color:'#BBBBBB'">
				</textarea>
			</view>
		</view>
		<view class="poiBtn">
			<view>取消编辑</view>
			<view>确认提交</view>
		</view>
	</view>
</template>

<script>
var wv; // 计划创建的webview
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false, //是否absolute布局
					comScroll:0,
					left:{
						isShowLeft:true,
						leftGobackColor:'black', //左边返回icon颜色
					},
					mid:{
						isShowMid:false,
						text:'',
						textColor:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
				},
				webViewCanshow: false, 
				// calloutCon:'沈阳中间',
				latitude: '41.70',//纬度
				longitude: '123.48',//经度
				covers: [
						{
							latitude: this.latitude,
							longitude:this.longitude,
							scale:18,
							iconPath: '../../../static/myPic/location.png',
							// callout:{
							// 	content:this.calloutCon,
							// 	color:'#343333',
							// 	bgColor:'#ffffff',
							// 	padding:'20',
							// 	textAlign:'center',
							// 	borderRadius:'20',
							// 	fontSize:20,
							// }
						},
					]
			}
		},
		methods:{
			// 处理由 webview 发来的通信 暂时没用
			wvMsgHandle(event) {
				console.log(event);
				
				let msg = event.detail.data.action;
				if(msg == 'backTaped') {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// 设置经纬
			setLocation(lng, lat) {
				wv.evalJS(`window.centerAndZoom(${lng},${lat})`)
			},
			// 设置 webview 页面的返回按钮的 top值 
			setBackTop(top) {
				wv.evalJS(`window.setBackIconTop(${top})`)
			},
			// 根据 经纬度初始化地图
			async initWebView() {
				return new Promise((resolve, reject) => {
					var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
					setTimeout(() => {
						
						wv = currentWebview.children()[0];
						resolve()
						// 初始化 webview 的样式 height, top
						// let height = uni.upx2px(560);
						// top可用于设置webview的距离页面的上边距
						// let top = global.statusBarHeight + 15;
						// wv.setStyle({ height })
						// this.setBackTop(top);
						// console.log(wv);
						// this.setLocation(longitude, latitude)
						// wv.evalJS('window.tester()')
						// wv.setStyle({top:150,height:300})
					}, 1000); //如果是页面初始化调用时，需要延时一下
				})
				
			},
			setWebview(longitude, latitude) {
				let height = uni.upx2px(560);
				let top = global.statusBarHeight + 15;
				wv.setStyle({ height })
				this.setBackTop(top);
				console.log(wv);
				this.setLocation(longitude, latitude)
			},
			// 获取当前地理位置
			async getLocation(){
				return new Promise((resolve, reject) => {

				
					uni.getLocation({
						type:'wgs84',
						success:(res) => {
							// console.log('当前位置的经度：' + res.longitude);
							// console.log('当前位置的纬度：' + res.latitude);
							//  this.longitude = res.longitude.toFixed(2);
							//  this.latitude = res.latitude.toFixed(2);
							//  console.log(this.longitude, this.latitude);
							console.log(res);
							let {longitude, latitude} = res;
							resolve({longitude, latitude})
							
						}
					})
				})
			},
			// 上传正面图片
			uploadZm(){
				uni.chooseImage({
					success:(res) =>{
						const zmFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url:'',
							files:zmFilePaths[0],
							name:'file',
							success:(uploadFileRes) =>{
								console.log(uploadFileRes.data);
							}
						})
					}
				})
			},
			// 上传位置周围图片1
			uploadZw1(){
				uni.chooseImage({
					success:(res) =>{
						const zw1FilePaths = res.rempFilePaths;
						uni.uploadFile({
							url:'',
							files:zw1FilePaths[0],
							name:'file',
							success:(uploadFileRes) =>{
								console.log(uploadFileRes.data);
							}
						})
					}
				})
			},
			// 上传位置周围图片2
			uploadZw2(){
				uni.chooseImage({
					success:(res) =>{
						const zw2FilePaths = res.tempFilePaths;
						uni.uploadFile({
							url:'',
							filePath:zw2FilePaths[0],
							name:'file',
							success:(uploadFileRes) =>{
								console.log(uploadFileRes.data);
							}
						})
					}
				})
			}
		},
		async onReady() {
			await this.initWebView();
			let {longitude, latitude} = await this.getLocation();
			
			await this.setWebview(longitude, latitude);
			// this.webViewCanshow = true;
			// this.initWebView(longitude, latitude);
			this.longitude = longitude;
			this.latitude = latitude;
		},
		// onShow(){
		// 	 this.getLocation();
		// },
		
	}
</script>

<style>
	
	.poiInfo{
		width:690upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding:0upx 32upx;
		box-sizing: border-box;
		margin:auto;
		margin-top: 530upx;
		margin-bottom:25upx;
 		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.poiInfo2{
		width:690upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding:0upx 32upx;
		box-sizing: border-box;
		margin:auto;
		/* margin-top: 300upx; */
		margin-bottom:25upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
	}
	.poiInfo:first-child{
		margin-top: -50upx;
		position: relative;
		z-index: 9;
	}
	.poiInfo:last-child{
		margin-bottom: 0;
	}
	.infoTit{
		font-size: 30upx;
		color: #010101;
		line-height: 90upx;
		border-bottom:1upx solid #ECECEC;
	}
	.infoTit:before{
		content: "";
		display: inline-block;
		width:5upx;
		height: 23upx;
		background-color: #54B0FF;
		margin-right:12upx;
	}
	.infoCon > view{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #000000;
		font-size: 28upx;
		line-height: 88upx;
		border-bottom: 1upx solid #ECECEC;
	}
	.infoCon > view:last-child{
		border-bottom:0
	}
	.infoCon > view text{
		color: #3D86FF;
		font-size: 28upx;
		width:190upx;
	}
	.infoInput{
		line-height: 90upx;
		display:flex;
		flex-direction: row;
		align-items: center;
	}
	.infoInput text{
		font-size: 28upx;
		color: #000000;
		width:190upx;
		
	}
	.infoInput input{
		font-size: 28upx;
	}
	.picCon{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width:100%;
		margin:42upx 0;
	}
	
	.picConList{
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	
	.picConList image{
		width:132upx;
		height:132upx;
	}
	.picConList text{
		font-size: 20upx;
		color: #BBBBBB;
		margin-top:26upx;
	}
	.tipInfo{
		display: flex;
		flex-direction: row;
	}
	.tipInfo textarea{
		font-size:28upx;
	}
	.bzText{
		margin-top:68upx;
		font-size: 28upx;
		color: #333333;
	}
	.tipInfo textarea{
		width:508upx;
		height: 267upx;
		border:1upx solid #EFEFEF;
		margin:35upx 0upx 28upx 40upx;
		padding:33upx;
		box-sizing: border-box;
	}
	.poiBtn{
		margin-top:30upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-bottom: 30upx;
	}
	.poiBtn view{
		width:240upx;
		height: 72upx;
		line-height: 72upx;
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		border-radius: 72upx;
	}
	.poiBtn view:first-child{
		background-color: #E6E6E6;
		margin-right: 90upx;
	}
	.poiBtn view:nth-child(2){
		background:linear-gradient(to right,#54B0FF,#577AFF) ;
	}
	.tMapText{
		width:100%;
		height: 600upx;
	}

</style>

<style>

</style>